
import React, { useState, useEffect } from 'react'

export default function App() {
  // 准备组件的显示于隐藏
  const [ isShow, setIsShow ] = useState(true)
  return <div>
    {isShow && <Child></Child> }
    <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
  </div>
  }

function Child(){
  // 在子组件中挂载时监听窗口改变事件
  // 封装监听代码
  const resizeFn = () =>{
    console.log('123  ----->  ', 123);
  }
// 挂载后，开启监听
  useEffect(() =>{
    window.addEventListener("resize",resizeFn)

    return () =>{
      console.log(' 触发 我被卸载了， ----->  ', );
      window.removeEventListener("resize",resizeFn)
    }
  },[])
 
  return <div>我是子组件</div>
}

